<template>
    <div class="pl-box">
        <div class="pl-header">
            <a href="#">
                <img class="pl-back" src="./img/goBack.png" alt="goBack.png">
            </a>
            <label class="pl-search">
                <input type="text" placeholder="搜索">
            </label>
            <a href="#">
                <img class="pl-menu" src="./img/icon-menu.png" alt="icon-menu.png">
            </a>
        </div>
        <div class="pl-select">
            <div class="pl-current">
                综合
                <div class="pl-icon">
                    <span class="pl-up"></span>
                    <span class="pl-down"></span>
                </div>
            </div>
            <div>
                销量
                <div class="pl-icon">
                    <span class="pl-up"></span>
                    <span class="pl-down"></span>
                </div>
            </div>
            <div>
                价格
                <div class="pl-icon">
                    <span class="pl-up"></span>
                    <span class="pl-down"></span>
                </div>
            </div>
            <div>
                筛选
                <div class="pl-icon">
                    <span class="pl-up"></span>
                    <span class="pl-down"></span>
                </div>
            </div>
        </div>

        <div class="pl-pro-list">
            <div class="pl-list">
                <div class="left">
                    <a href="#">
                        <img src="./img/confirm_order2_07.png" alt="confirm_order2_07.png">
                    </a>
                </div>
                <div class="right">
                    <h1>{{title}}</h1>
                    <div class="pl-price">
                        <span class="pl-p"><i>¥</i>{{price}}</span><span class="pl-add">加入购物车</span>
                    </div>
                    <div class="pl-num-paid">
                        <span class="pl-paid">{{paid}}人已付款</span><span class="">免运费</span>
                    </div>
                </div>
            </div>
            <div class="pl-list">
                <div class="left">
                    <a href="#">
                        <img src="./img/confirm_order2_07.png" alt="confirm_order2_07.png">
                    </a>
                </div>
                <div class="right">
                    <h1>{{title}}</h1>
                    <div class="pl-price">
                        <span class="pl-p"><i>¥</i>{{price}}</span><span class="pl-add">加入购物车</span>
                    </div>
                    <div class="pl-num-paid">
                        <span class="pl-paid">{{paid}}人已付款</span><span class="">免运费</span>
                    </div>
                </div>
            </div>
            <div class="pl-list">
                <div class="left">
                    <a href="#">
                        <img src="./img/confirm_order2_07.png" alt="confirm_order2_07.png">
                    </a>
                </div>
                <div class="right">
                    <h1>{{title}}</h1>
                    <div class="pl-price">
                        <span class="pl-p"><i>¥</i>{{price}}</span><span class="pl-add">加入购物车</span>
                    </div>
                    <div class="pl-num-paid">
                        <span class="pl-paid">{{paid}}人已付款</span><span class="">免运费</span>
                    </div>
                </div>
            </div>
            <div class="pl-list">
                <div class="left">
                    <a href="#">
                        <img src="./img/confirm_order2_07.png" alt="confirm_order2_07.png">
                    </a>
                </div>
                <div class="right">
                    <h1>{{title}}</h1>
                    <div class="pl-price">
                        <span class="pl-p"><i>¥</i>{{price}}</span><span class="pl-add">加入购物车</span>
                    </div>
                    <div class="pl-num-paid">
                        <span class="pl-paid">{{paid}}人已付款</span><span class="">免运费</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="pl-footer">
            <span>加载更多</span>
            <img src="./img/icon-open.png" alt="icon-open.png">
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        title: 'NBR瑜伽垫  加大加厚加长防滑瑜伽垫',
        price: '188.00',
        paid: 999,
    };
  }
};
</script>

<style scoped lang='less'>
@import "./css/pro_list.less";
</style>